<template>
  <el-dialog
    v-model="formVisible"
    :title="title"
    :append-to-body="true"
    @close="closeDialog"
    destroy-on-close
    width="500px"
    :close-on-click-modal="false"
  >
    <el-form
      :model="dictDetailForm"
      :rules="dictDetailFormrules"
      ref="dictDetailFormRef"
      label-width="80"
      label-position="right"
    >
      <el-form-item label="排序号" prop="sort">
        <el-input v-model="dictDetailForm.sort" type="number"></el-input>
      </el-form-item>
      <el-form-item label="名称" prop="label">
        <el-input v-model="dictDetailForm.label"></el-input>
      </el-form-item>
      <el-form-item label="值" prop="value">
        <el-input v-model="dictDetailForm.value"></el-input>
      </el-form-item>
    </el-form>
    <div class="modal-footer">
      <el-button @click="saveDicDetail" :icon="Plus" type="primary">保存</el-button>
    </div>
  </el-dialog>
</template>
<script setup lang="ts">
import { Plus } from "@element-plus/icons-vue";
import { FormInstance } from "element-plus";
import {
  adddictionarydetail,
  editdictionarydetail,
  getdictionarydetailifo,
} from "@/api/dict/index";
const title = ref<string>("");
const props = defineProps({
  dictId: { type: String, required: true },
  dictDetailId: { type: String, default: null },
});

const formVisible = ref<boolean>(true);
const emit = defineEmits(["close", "refresh"]);
const isEdit = ref<boolean>(false);
const dictDetailFormRef = ref<FormInstance>();
const dictDetailForm = ref<any>({
  sort: 0,
  label: "",
  value: "",
});
const dictDetailFormrules = ref({
  label: [{ required: true, message: "请输入名称", trigger: "blur" }],
  value: [{ required: true, message: "请输入值", trigger: "blur" }],
});

const closeDialog = () => {
  formVisible.value = false;
  emit("close", formVisible.value);
};

const saveDicDetail = () => {
  dictDetailFormRef.value?.validate((validate: boolean) => {

    let param={...dictDetailForm.value};
    console.log('isedit',isEdit.value)
    param.dataDictionaryId=props.dictId;
    if (validate) {
      if (isEdit.value) {
        editdictionarydetail(props.dictDetailId,param).then(res=>{
          ElNotification({
            title: "提示",
            message: "修改成功",
            type: "success",
            duration: 2000,
          });
          closeDialog();
          emit("refresh");
        });
      } else {
        adddictionarydetail(param).then(res=>{
          ElNotification({
            title: "提示",
            message: "添加成功",
            type: "success",
            duration: 2000,
          });
          closeDialog();
          emit("refresh");
        });
      }
    }
  });
};

const  edit_init=()=>{
  getdictionarydetailifo(props.dictDetailId).then(res=>{
       dictDetailForm.value=res;
  });
}
onMounted(() => {
  if (props.dictDetailId == null) {
    isEdit.value = false;
    title.value = "添加字典详情";
  } else {
    isEdit.value = true;
    title.value = "修改字典详情";
    edit_init();
  }
});
</script>
<script lang="ts">
export default {
  name: "addOrUpdateDictionaryDetail",
};
</script>
